<template>
  <div class="supplement">
    <navBar title="订单资料审核" @onClickLeft="onClickLeft" />
    <van-collapse v-model="activeClass">
      <div class="orderInfo">
        <van-collapse-item title="订单信息" name="1">
            <van-field readonly label="报销地点" value="华中科技大学附属协和医院主院区" />
            <van-field readonly label="待办事项" value="签字报销" />
            <van-field readonly label="报销类型" value="专利" />
            <van-field readonly label="报销时间" value="30天" />
        </van-collapse-item>  
        <van-collapse-item title="订单文件" name="2">
          <van-cell :title="item.title" v-for="(item,index) in details.file" :key="index">
            <template #default>
              <van-checkbox-group v-model="post.abc" style="float:right">
                  <van-checkbox name="1">通过</van-checkbox>
              </van-checkbox-group>
            </template>
            <template #label>
              <div class="needFlex">
                <div class="needFlexC">
                  
                  <van-image
                    width="80"
                    height="80"
                    :src="item.value"
                    @click="getBigImg(item.value)"
                  />
                </div>
              </div>
            </template>
          </van-cell>
        </van-collapse-item>  
      </div>
      <div class="supplement-btn">
        <van-button round block type="info" native-type="submit" @click="onSubmit">提交</van-button>
      </div>
    </van-collapse>
  </div>
</template>

<script>
import navBar from "@cb/navBar.vue";
import { orderSupplement, uploadFile, deleteFile } from "@a/order.js";
import axios from "axios";
import { Dialog, Toast,Divider,ImagePreview } from "vant";
export default {
  components: {
    navBar
  },
  data() {
    return {
        post:{
            abc:[]
        },
        details:{
            file:[
                {title:'发票',value:"https://img.yzcdn.cn/vant/cat.jpeg",laber:"fp"},
                {title:'发票',value:"https://img.yzcdn.cn/vant/cat.jpeg",laber:"fp"},
                {title:'发票',value:"https://img.yzcdn.cn/vant/cat.jpeg",laber:"fp"},
            ]
        },
        activeClass:["1","2","3"],
        form: {},
        fileList: [],
        invFirstList: [],
        jfFileList: [],
        params: new FormData(),
        order_id: null,
        fileIndex: 1,
        //服务文件路径
        service_file: [],
        //发票文件路径
        invoice_file: "",
        // 文件大小
        filesize: 1024 * 300
    };
  },
  deactivated() {
    this.$destroy(true); //销毁组件
  },
  watch: {},
  created() {
    this.order_id = this.$route.query && this.$route.query.order_id;
  },
  methods: {
    submitPost() {
      Toast.success('按钮点击')
      // this.params.append("order_id", this.order_id);
      // this.params.set("service_file", this.service_file.join("&"));
      // this.params.set("invoice_file", this.invoice_file);
      // orderSupplement(this.params).then(res => {
      //   if (res.code === 200) {
      //     console.log(res);
      //     Toast.success("订单补充成功！");
      //     this.$router.push({
      //       path: `/user/home/details/${this.order_id}`,
      //       params: {
      //         id: this.order_id
      //       }
      //     });
      //   }
      // });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit() {
      // if (!this.fileList.length) {
      //   Toast.fail("请先上传文件");
      //   return;
      // }
      this.submitPost();
    },
    onOversize(file) {
      Toast("文件大小不能超过 300kb");
    },
    getBigImg(img) {
      ImagePreview([
        img,
      ]);
    }
  }
};
</script>

<style lang="less">
.supplement-btn{
    z-index: 200;
}
.supplement {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: scroll;
  &-form {
    margin-top: 20px;
    .van-cell {
      margin-bottom: 15px;
    }
    .needTips {
      .van-field__body {
        .van-field__control {
          flex-direction: column;
          align-items: flex-start;
        }
      }
      .tips {
        color: #ccc;
      }
    }
  }
  .van-submit-bar {
    bottom: 20px;
  }
  &-btn {
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
    position: fixed;
    bottom: 20px;
  }
}
.needFlexC {
  display: flex;
  flex-direction: column;
}
.needFlex {
  display: flex;
  justify-content: space-between;
}

</style>
